<template>
    <div class="bg">
        <NavTop/>
        <div style="width: 50%; margin: auto;">
            <div class="block text-center" style="text-align: center;">
                <el-card style="margin:50px auto; max-width: 500px;" >
                    <el-carousel height="500px" motion-blur>
                        <el-carousel-item v-for="(imgUrl, index) in list.imglist" :key="index">
                            <h3 class="small justify-center" text="2xl"><img :src="imgUrl" alt="图片描述"></h3>
                        </el-carousel-item>
                    </el-carousel>
                    <br>
                    <el-input v-model="num" style="width: 100px" placeholder="请输入数量" title="注意购买不能超过10张" />&nbsp;&nbsp;张/{{ list.onlineprice }}元&nbsp;
                    <el-button type="danger" circle @click="num--" :disabled="num==0">-</el-button>&nbsp;
                    <el-button type="primary" circle @click="num++" :disabled="num>=10">+</el-button><br><br>
                    <el-button type="success" round @click="cartAdd()" :disabled="num==0">加入购物车</el-button>
                    <el-button type="warning" round @click="orderAdd()" :disabled="num==0">立即购买</el-button><br><br>
                    <label style="color: crimson;">如需线下购买价格肯能稍贵，价格如下： {{ list.price }}元/张</label><br><br>
                    <template #footer>{{ list.name }}:{{ list.desc }}</template>
                </el-card>
                
                <br>
                <h1 style="color:burlywood">讨论区：</h1>
                
            </div><br>

            
            <div style="margin-left: 210px;">
                <el-input v-model="input" style="width: 50%" placeholder="Please input" />
                &nbsp;&nbsp;
                <el-button type="primary" round @click="submitComment">提交</el-button>
                <div v-for="(comment, index) in comments" :key="index" class="comment-item">
                    <p>{{ comment.content }}</p>
                    <p>评论时间：{{ comment.time }}</p>
                    <el-rate v-model="comment.rating" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { userGoodsStore } from '../../store/good.js'

export default {
    props:['query'],
    data() {
        return {
            input:'',
            list:[],
            num:0,
            store:userGoodsStore(),
            time: new Date(),
            comments: [
                {
                    content: '匿名用户:在课上玩当比大小真好玩',
                    time: new Date(),
                    rating:4
                },
                {
                    content: 'alice:一点都不好玩',
                    time: new Date(),
                    rating:1
                },
                {
                    content: '赵*西:一般',
                    time: new Date(),
                    rating:2
                },
            ],//评论内容,
            name:''
        }
    },
    methods:{
        submitComment() {
            if (this.input.trim() === '') {
                ElMessageBox.alert('评论内容不能为空，请输入内容后再提交', '提示', {
                    confirmButtonText: 'OK'
                });
                return;
            }
            var name = sessionStorage.getItem('username')
            const comment = {
                content: name + ":" + this.input,
                time: new Date(),
                rating:0
            };
            this.comments.push(comment);
            localStorage.setItem('productComments', JSON.stringify(this.comments));
            this.input = '';
            ElMessage({
                    type: 'success',
                    message: '提交成功',
                })
        },
        cartAdd() {
            if (sessionStorage.getItem('username') === '游客') {
                this.$router.push('/login')
            } else {
                ElMessageBox.alert('您成功添加至购物车', '温馨提示', {
                confirmButtonText: 'OK',
                })
                this.store.cartAdd({
                    id:this.list.id,
                    name:this.list.name,
                    price:this.list.price,
                    onlineprice:this.list.onlineprice,
                    num:this.num,
                    total:this.num * this.list.onlineprice
                })
            }
        },
        orderAdd() {
            if (sessionStorage.getItem('username') === '游客') {
                this.$router.push('/login')
            } else {
                ElMessageBox.alert('您已加入订单，请前往订单页进行付款', '温馨提示', {
                confirmButtonText: 'OK',
                });
                console.log(this.list)
                this.list.orderID = this.time.getFullYear().toString() + (this.time.getMonth() + 1).toString() + this.time.getDate().toString() + Math.random().toString().slice(2,10)
                // console.log(this.data.orderID)
                
                //把相关的数据添加到store中的订单
                this.store.orderAdd({
                    orderID:this.list.orderID,
                    time:this.time,
                    num:this.num,
                    sum:this.num * this.list.onlineprice,
                    isOrdered:false, //记录是否完成支付
                    child:[
                        {
                            id:this.list.id,
                            name:this.list.name,
                            price:this.list.price,
                            onlineprice:this.list.onlineprice,
                            num:this.num,
                            total:this.num * this.list.onlineprice
                        }
                    ],
                })
            }
            
        }
    },
    components:{
        NavTop
    },
    mounted() {
        this.list = this.$route.query;
        const storedComments = localStorage.getItem('productComments');
        if (storedComments) {
            this.comments = JSON.parse(storedComments);
        }
    },
    
}
</script>

<style scoped>
.comment-item {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.bg {
    background: #ece7ec !important;
}
</style>
